<template>
	<view class="login">
		<view class="container">
			<view class="login-title">欢迎来到肿瘤预测小程序</view>
			<view class="form">
				<view class="form-item">
					<view class="phone-area-code">
						<picker @change="phoneAreaCodeChange" :value="phoneAreaCodeIndex" :range="phoneAreaCode">
							<view class="uni-input">{{phoneAreaCode[phoneAreaCodeIndex]}}</view>
						</picker>
					</view>
					<input class="input phone-input" type="input" v-model="phoneInput" placeholder="请输入手机号码"
						maxlength="13" />
					<view class="btn-clear" @click="clearInput" v-show="phoneInput !=''">清除</view>
				</view>
				<view class="form-item">
					<input class="input" type="input" v-model="codeInput" placeholder="请输入验证码"
						style="padding-right: 200rpx;" />
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
					<text class="btn-send-code btn-send-code-disable" @tap="getCode">{{tips}}</text>
					<!-- 	<text class="btn-send-code" v-show="false">获取验证码</text> -->
				</view>
			</view>
			<view class="btn-log-in" @click="toHome">登录</view>
			<!-- <view class="login-btn-group"><text @click="">密码登录</text><text @click="">新用户注册</text></view> -->
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	let that = this;
	import config from '@/common/config'
	// 引入配置
	import {
		loginWeixin,
		getCode,
		loginCode,
		checkopenIdtoken
	} from '@/common/api.js';
	//import uCode from "@/uni_modules/uview-ui/components/u-code/u-code.vue";
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	export default {
		components: {
			//	uCode
		},
		data() {
			return {
				config: null,
				statusBarHeight: statusBarHeight,
				phoneInput: '',
				codeInput: '',
				phoneAreaCode: ['+86', '+010', '+020'],
				phoneAreaCodeIndex: 0,
				openIdtoken: '',
				openIdtokenConfig: null,
				seconds: 60,
				tips: '',
				model: {
					phone: '',
					code: '',
					openIdtoken: ''
				},
			}
		},
		watch: {
			phoneInput(newValue, oldValue) {
				if (newValue > oldValue) {
					if (newValue.length === 4 || newValue.length === 9) {
						var pre = newValue.substring(0, newValue.length - 1)
						var last = newValue.substr(newValue.length - 1, 1)
						this.phoneInput = pre + ' ' + last
					} else {
						this.phoneInput = newValue
					}
				} else {
					if (newValue.length === 9 || newValue.length === 4) {
						this.phoneInput = this.phoneInput.trim()
					} else {
						this.phoneInput = newValue
					}
				}
			},
		},
		onLoad(option) {
			let pages = getCurrentPages(); //当前页
			let beforePage = pages[pages.length - 2]; //上个页面
			console.log(beforePage)
			that = this;
			uni.removeStorageSync(
				'jump'
			)
			/* 	this.openIdtoken=option.openIdtoken;
				console.log( config.baseUrl+"ba1")
				console.log( config.openIdToken+"ba2") */
			/* this.config=config;
			this.openIdtokenConfig=config.openIdToken; */
			this.openIdtoken = uni.getStorageSync(config.openIdToken);
		},
		onShow() {

			if (null == this.openIdtoken || Object.keys(this.openIdtoken).length === 0 || this.openIdtoken == '') {

				this.login();
			} else {
				//先验证 this.openIdToken 的合法性
				let req = {
					'openIdtoken': this.openIdtoken
				};

				checkopenIdtoken({
					params: req
				}).then(data => {
					if (data == false) {
						that.login();
						return;
					}

				}).catch(() => {

				})
			}
		},
		methods: {
			end() {
				//uni.$u.toast('倒计时结束');
			},
			start() {
				//uni.$u.toast('倒计时开始');
				uni.$u.toast('验证码已发送');
			},
			getCode() {
				console.log(this.phoneInput)
				let phone = uni.$u.trim(this.phoneInput, 'all')
				console.log();
				if (!uni.$u.test.mobile(phone)) {
					uni.$u.toast('请填写正确手机号');
					return;
				}
				/* this.$nextTick(()=>{
								console.log(this.$refs,"+this")
								console.log(this.$refs.test,"333333333")
							}) */
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					let req = {
						phone: phone,
						codeType: ''
					};
					getCode(req).then(data => {
						console.log(data)

						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}).catch(() => {

					})
					/* 
													setTimeout(() => {
														uni.hideLoading();
														// 这里此提示会被this.start()方法中的提示覆盖
													}, 2000); */
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			login() {
				//#ifdef MP-WEIXIN
				wx.login({
					success(res) {
						let req = {
							code: res.code
						};
						console.log(config.openIdToken + "fg")

						loginWeixin(req).then(data => {
							console.log("====")
console.log(data)
							if ("1" == data.status) {
								console.log(data.openIdtoken)
								//that.openIdtoken = data.openIdtoken;
								uni.setStorageSync(config.openIdToken, data.openIdtoken);
								console.log(config.openIdToken + "config")
								let openIdtoken = uni.getStorageSync(config.openIdToken);
							} else if ("0" == data.status) {
								uni.setStorageSync(config.userToken, data.token)
								uni.redirectTo({
									url: '../index/index',
								});
							}
							//that.openIdtoken=res.data.openIdtoken;
							//uni.setStorageSync(OPENIDTOKEN,res.data.openIdtoken);
						}).catch(() => {

						})

					}
				})
				//#endif
			},
			phoneAreaCodeChange: function(e) {
				this.phoneAreaCodeIndex = e.target.value
			},
			clearInput() {
				this.phoneInput = '';
			},
			toHome() {
				if (this.codeInput == null || this.codeInput == "") {
					uni.$u.toast('请填写验证码');
					return;
				}
				let phone = uni.$u.trim(this.phoneInput, 'all')
				if (phone == null || phone == "") {
					uni.$u.toast('请填写手机号');
					return;
				}
				this.model.openIdtoken = that.openIdtoken;
				this.model.phone = phone;
				this.model.code = this.codeInput;
				loginCode(this.model).then(data => {
					console.log(data)
					uni.setStorageSync(config.userToken, data.token)
					/* 	uni.navigateBack({
							
						}) */
					uni.redirectTo({
						url: '../index/index',
					});
				}).catch(() => {

				})

			},
		}
	}
</script>

<style>
	page {
		height: 100%;
		background: #fff url(~@/static/img/login_bg.jpg) no-repeat 0 0;
		background-size: 750rpx 414rpx;
	}
</style>
